<template>
    <div class="vextend">
        <h2>Vue.extend</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">创建组件，得到一个VC</p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

// 第一种写法 完整写法
// import Vue from 'vue';
// const Vextend = Vue.extend({
//     name: 'Vextend',
//     template: ``,
//     mixins: [mixinPage],
//     data() {
//         return {
//             hello: '当用extend时，这里的data必须写作data()方法，而不能用data对象'
//         }
//     }
// })
// export default Vextend;

// 第二种写法 简写形式
export default {
    name: 'Vextend',
    mixins: [mixinPage],
    data() {
        return {
            hello: '这是第二种方法，也就是第一种方法的简写形式'
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>